$(function ($) {
    $(".maxsize").css({top: ($(window).width() - $(".maxsize").height()) / 2});
    var repeat = localStorage.repeat || 0, shuffle = localStorage.shuffle || 'true', continous = true, autoplay = true,
        playlist = [{
            title: "Have A Nice Day",
            artist: "Bon Jovi",
            album: " ",
            cover: "img/HAND.jpg",
            mp3: "https://xzio.oss-cn-beijing.aliyuncs.com/static/music/Bon%20Jovi%20-%20Have%20A%20Nice%20Day.mp3",
        }, {
            title: "Fire",
            artist: "Gavin Degraw",
            album: " ",
            cover: "img/Fire.jpg",
            mp3: "https://xzio.oss-cn-beijing.aliyuncs.com/static/music/Gavin%20Degraw%20-%20Fire.mp3",
        }, {
            title: "Hall of Fame",
            artist: "The Script",
            album: " ",
            cover: "img/HOF.jpg",
            mp3: "https://xzio.oss-cn-beijing.aliyuncs.com/static/music/The%20Script%2Cwill.i.am%20-%20Hall%20of%20Fame.mp3",
        }, {
            title: "山海",
            artist: "CADY耳东",
            album: " ",
            cover: "img/SH.jpg",
            mp3: "https://xzio.oss-cn-beijing.aliyuncs.com/static/music/CADY%E8%80%B3%E4%B8%9C%20-%20%E5%B1%B1%E6%B5%B7%EF%BC%88%E5%8D%8E%E6%99%A8%E5%AE%87%E7%89%88%E6%9C%AC%EF%BC%89%EF%BC%88Cover%EF%BC%9A%E8%8D%89%E4%B8%9C%E6%B2%A1%E6%9C%89%E6%B4%BE%E5%AF%B9%EF%BC%89.mp3",
        }, {
            title: "风的季节",
            artist: "Soler",
            album: " ",
            cover: "img/FDJJ.png",
            mp3: "https://xzio.oss-cn-beijing.aliyuncs.com/static/music/Soler%20-%20%E9%A3%8E%E7%9A%84%E5%AD%A3%E8%8A%82.mp3",
        }, {
            title: "投降吧",
            artist: "郑俊弘",
            album: " ",
            cover: "img/TXB.jpg",
            mp3: "https://xzio.oss-cn-beijing.aliyuncs.com/static/music/%E9%83%91%E4%BF%8A%E5%BC%98%20-%20%E6%8A%95%E9%99%8D%E5%90%A7.mp3",
        }, {
            title: "手写的从前",
            artist: "周杰伦",
            album: " ",
            cover: "img/SXDCQ.jpg",
            mp3: "https://xzio.oss-cn-beijing.aliyuncs.com/static/music/%E5%91%A8%E6%9D%B0%E4%BC%A6%20-%20%E6%89%8B%E5%86%99%E7%9A%84%E4%BB%8E%E5%89%8D.mp3",
        }, {
            title: "往事只能回味",
            artist: "好妹妹",
            album: " ",
            cover: "img/WSZNHW.jpg",
            mp3: "https://xzio.oss-cn-beijing.aliyuncs.com/static/music/%E5%A5%BD%E5%A6%B9%E5%A6%B9%20-%20%E5%BE%80%E4%BA%8B%E5%8F%AA%E8%83%BD%E5%9B%9E%E5%91%B3.mp3",
        }, {
            title: "我也可以是流浪诗人",
            artist: "好妹妹",
            album: " ",
            cover: "img/WYKYSLLSR.jpg",
            mp3: "https://xzio.oss-cn-beijing.aliyuncs.com/static/music/%E5%A5%BD%E5%A6%B9%E5%A6%B9%20-%20%E6%88%91%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%98%AF%E6%B5%81%E6%B5%AA%E8%AF%97%E4%BA%BA.mp3",
        }, {
            title: "一如年少模样",
            artist: "陈鸿宇",
            album: " ",
            cover: "img/YRNSMY.jpg",
            mp3: "https://xzio.oss-cn-beijing.aliyuncs.com/static/music/%E9%99%88%E9%B8%BF%E5%AE%87%20-%20%E4%B8%80%E5%A6%82%E5%B9%B4%E5%B0%91%E6%A8%A1%E6%A0%B7.mp3",
        }];
    for (var i = 0; i < playlist.length; i++) {
        var item = playlist[i];
        $('#playlist').append('<li>' + item.artist + ' - ' + item.title + '</li>');
    }
    var time = new Date(), currentTrack = shuffle === 'true' ? time.getTime() % playlist.length : 0, audio, timeout,
        isPlaying, playCounts;
    var play = function () {
        audio.play();
        $('.playback').addClass('playing');
        timeout = setInterval(updateProgress, 500);
        isPlaying = true;
    };
    var pause = function () {
        audio.pause();
        $('.playback').removeClass('playing');
        clearInterval(updateProgress);
        isPlaying = false;
    };
    var setProgress = function (value) {
        var currentSec = parseInt(value % 60) < 10 ? '0' + parseInt(value % 60) : parseInt(value % 60),
            ratio = value / audio.duration * 100;
        $('.timer').html(parseInt(value / 60) + ':' + currentSec);
        $('.progress .pace').css('width', ratio + '%');
        $('.progress .slider a').css('left', ratio + '%');
    };
    var updateProgress = function () {
        setProgress(audio.currentTime);
    };
    $('.progress .slider').slider({
        step: 0.1, slide: function (event, ui) {
            $(this).addClass('enable');
            setProgress(audio.duration * ui.value / 100);
            clearInterval(timeout);
        }, stop: function (event, ui) {
            audio.currentTime = audio.duration * ui.value / 100;
            $(this).removeClass('enable');
            timeout = setInterval(updateProgress, 500);
        }
    });
    var setVolume = function (value) {
        audio.volume = localStorage.volume = value;
        $('.volume .pace').css('width', value * 100 + '%');
        $('.volume .slider a').css('left', value * 100 + '%');
    };
    var volume = localStorage.volume || 0.5;
    $('.volume .slider').slider({
        max: 1, min: 0, step: 0.01, value: volume, slide: function (event, ui) {
            setVolume(ui.value);
            $(this).addClass('enable');
            $('.mute').removeClass('enable');
        }, stop: function () {
            $(this).removeClass('enable');
        }
    }).children('.pace').css('width', volume * 100 + '%');
    $('.mute').click(function () {
        if ($(this).hasClass('enable')) {
            setVolume($(this).data('volume'));
            $(this).removeClass('enable');
        } else {
            $(this).data('volume', audio.volume).addClass('enable');
            setVolume(0);
        }
    });
    var switchTrack = function (i) {
        if (i < 0) {
            track = currentTrack = playlist.length - 1;
        } else if (i >= playlist.length) {
            track = currentTrack = 0;
        } else {
            track = i;
        }
        $('audio').remove();
        loadMusic(track);
        if (isPlaying == true) play();
    };
    var shufflePlay = function () {
        var time = new Date(), lastTrack = currentTrack;
        currentTrack = time.getTime() % playlist.length;
        if (lastTrack == currentTrack) ++currentTrack;
        switchTrack(currentTrack);
    }
    var ended = function () {
        pause();
        audio.currentTime = 0;
        playCounts++;
        if (continous == true) isPlaying = true;
        if (repeat == 1) {
            play();
        } else {
            if (shuffle === 'true') {
                shufflePlay();
            } else {
                if (repeat == 2) {
                    switchTrack(++currentTrack);
                } else {
                    if (currentTrack < playlist.length) switchTrack(++currentTrack);
                }
            }
        }
    }
    var beforeLoad = function () {
        var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;
        $('.progress .loaded').css('width', (100 / (this.duration || 1) * endVal) + '%');
    }
    var afterLoad = function () {
        if (autoplay == true) play();
    }
    var loadMusic = function (i) {
        var item = playlist[i],
            newaudio = $('<audio>').html('<source src="' + item.mp3 + '"><source src="' + item.ogg + '">').appendTo('#player');
        $('.cover').html('<img src="' + item.cover + '" alt="' + item.album + '">');
        $('.tag').html('<strong>' + item.title + '</strong><span class="artist">' + item.artist + '</span><span class="album">' + item.album + '</span>');
        $('#playlist li').removeClass('playing').eq(i).addClass('playing');
        audio = newaudio[0];
        audio.volume = $('.mute').hasClass('enable') ? 0 : volume;
        audio.addEventListener('progress', beforeLoad, false);
        audio.addEventListener('durationchange', beforeLoad, false);
        audio.addEventListener('canplay', afterLoad, false);
        audio.addEventListener('ended', ended, false);
    }
    loadMusic(currentTrack);
    $('.playback').on('click', function () {
        if ($(this).hasClass('playing')) {
            pause();
        } else {
            play();
        }
    });
    $('.rewind').on('click', function () {
        if (shuffle === 'true') {
            shufflePlay();
        } else {
            switchTrack(--currentTrack);
        }
    });
    $('.fastforward').on('click', function () {
        if (shuffle === 'true') {
            shufflePlay();
        } else {
            switchTrack(++currentTrack);
        }
    });
    $('#playlist li').each(function (i) {
        var _i = i;
        $(this).on('click', function () {
            switchTrack(_i);
        });
    });
    if (shuffle === 'true') $('.shuffle').addClass('enable');
    if (repeat == 1) {
        $('.repeat').addClass('once');
    } else if (repeat == 2) {
        $('.repeat').addClass('all');
    }
    $('.repeat').on('click', function () {
        if ($(this).hasClass('once')) {
            repeat = localStorage.repeat = 2;
            $(this).removeClass('once').addClass('all');
        } else if ($(this).hasClass('all')) {
            repeat = localStorage.repeat = 0;
            $(this).removeClass('all');
        } else {
            repeat = localStorage.repeat = 1;
            $(this).addClass('once');
        }
    });
    $('.shuffle').on('click', function () {
        if ($(this).hasClass('enable')) {
            shuffle = localStorage.shuffle = 'false';
            $(this).removeClass('enable');
        } else {
            shuffle = localStorage.shuffle = 'true';
            $(this).addClass('enable');
        }
    });
    $(".download img").hover(function () {
        $(this).attr({"src": "img/link2.png"});
    }, function () {
        $(this).attr({"src": "img/link1.png"});
    });
});
